<script setup lang="ts">
import { onMounted, reactive } from "vue";
import useWindowWidth from "@/hooks/useWindowWidth.ts";
import { storeToRefs } from "pinia";
import useHomeStore from "@/pinia/modules/homeStore.ts";
import DoctorCard from "@/views/home/components/followDoctor/doctorCard.vue";

import type { PageParams } from "@/types/homeTypes";

const homeStore = useHomeStore();

const { followDoctorList } = storeToRefs(homeStore);

const { width, height } = useWindowWidth(375, 667);


const params = reactive<PageParams>({
    current: 1,
    pageSize: 20,
});
onMounted(() => {
    homeStore.fetchDoctorList(params);
});
</script>

<template>
    <div class="follow-doctor">
        <div className="head">
            <p>推荐关注</p>
            <a> 查看更多<i class="van-icon van-icon-arrow" /></a>
        </div>
        <div class="body">
            <!-- swipe 组件 -->
            <van-swipe :width="(150/375)*width" :show-indicators="false" :loop="false">
                <van-swipe-item v-for="item in followDoctorList" :key="item.id">
                    <doctor-card :item="item"></doctor-card>
                </van-swipe-item>
            </van-swipe>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
    background-color: var(--cp-bg);
    height: 250px;

    .head {
        display: flex;
        justify-content: space-between;
        height: 45px;
        align-items: center;
        padding: 0 15px;
        font-size: 13px;

        > a {
            color: var(--cp-tip);
        }
    }

    .body {
        width: 100%;
        overflow: hidden;
    }
}
</style>
